<!--  老师参考代码，设计登录页面  组合式-->
<template>
    <!-- <el-button type="primary" @click="toChat">登录</el-button> -->
     <div class="outerFrame">
        <div class="header" @click='toChat'>暑期培训项目</div>
        <div class="loginFrame">
            <div class="a1">欢迎登录</div>
            <div class="a21">
                <div :class="input1">
                    <div class="icon1 icon11">
                        <img class="icon1" mode="widthFix" src="../assets/sx.jpg" alt="无">
                    </div>
                    <input class="input1" type="text" @focus="getfocus" @blur="outfocus" placeholder="请输入用户名">
                </div>
            </div>
            <div class="a21 a23">
                <div :class="input2">
                    <div class="icon1 icon11">
                        <img class="icon1" mode="widthFix" src="../assets/xx.png" alt="无">
                    </div>
                    <input class="input1" type="password" @focus="getfocus1" @blur="outfocus1" placeholder="请输入密码">
                    
                </div>
            </div>
            <div class="a4">
                <div class="a41">
                    <el-checkbox
                    v-model="checked"
                    checked-color="#1a73e8"
                    unchecked-color="#dcdcdc"
                    >
                    </el-checkbox>
                </div>
                <div class="a42">记住密码</div>
                <div class="a44"></div>
                <!-- <div class="a43">忘记密码？</div> -->
                <a href="#" class="a43">忘记密码？</a>
            </div>
            <div class="a5">
                <div class="a51">登录</div>
            </div>
        </div>

     </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'

let router = useRouter()

let input1 = ref('a2')
let input2= ref('a2')
let toChat=()=> {
    console.log('tochat');
    
    router.push('/LoginAlview')
}
let getfocus=()=>{
    console.log('getfocus');
    input1.value = 'a22'
}
let outfocus=()=>{
    console.log('outfocus');
    input1.value = 'a2'
}
let getfocus1=()=>{
    console.log('getfocus1');
    input2.value = 'a22'
}
let outfocus1=()=>{
    console.log('outfocus1');
    input2.value = 'a2'
}


</script>

<style>
.outerFrame{
    background: url(../assets/xx.png) no-repeat ;
    background-size: cover;
    width: 97vw;
    height: 98vh;
    background-color: rgb(243, 243, 243);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.header{
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}
.loginFrame{
    background-color: #fff;
    margin-top: 65px;
    width: 500px;
    height: 360px;
    /* border: solid 1px black; */
    border-radius: 20px;
    box-shadow: 12px 12px 14px 0px rgba(214, 214, 214, 0.3);
}
.a1{
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 34px 0;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}
.a21{
    width: 100%;
    display: flex;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}
.a2{
    display: flex;
    width: 416px;
    height: 50px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    overflow: hidden;
}
.a22{
    display: flex;
    width: 416px;
    height: 50px;
    border: 2px solid #bcc0ff;
    border-radius: 10px;
    overflow: hidden;
}
.icon1{
    width: 16px;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}
.icon11{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.input1{
    flex: 1;
    border: none;
    outline: none;
    
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
}
.a23{
    margin-top: 20px;
}
.a4{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
}
.a41{
    margin-left: 42px;
}
.a42{
    margin-left: 10px;
    font-size: 15px;
}
.a43{
    margin-right: 42px;
    font-size: 15px;
}
.a44{
    flex: 1;
}
.a5{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
}
.a51{
    width: 416px;
    border-radius: 10px;
    background-color: #1a73e8;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
</style>